<template>
    <!-- 案例展示 -->
    <div class="csse">
        <div class="show">{{ caseTitle ? caseTitle[0].productTitle : '' }}</div>
        <div :class="{ 'Medical-phone' : getIsPhont }" class="Medical bx">
            <div v-for="item in list" :key="item.id" class="aesthetics">
                <img :src="$staticPath + item.productImageAddress" alt="" />
                <div class="local" v-html="item.productDescribe"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    props: ["list","caseTitle"],
    computed: {
        ...mapGetters(["getIsPhont"]),
    },
};
</script>

<style lang="scss" scoped>
.csse {
    background: white;

    .show {
        text-align: center;
        color: #333333;
        font-size: 20px;
        font-weight: 900;
    }

    .Medical {
        display: flex;
        flex-wrap: wrap;
        padding: 0 40px;

        .aesthetics {
            width: calc(33% - 80px);
            margin: 40px;

            div {
                font-size: 13px;
                color: #555;
            }

            img {
                width: 100%;
            }
        }
    }

    //移动端样式
    .Medical-phone {
        padding: 0;

        .aesthetics {
            width: 100%;
            margin: 0;

            div {
                font-size: 13px;
                color: #555;
            }
        }
    }
}
</style>